<script lang="ts" setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {showConfirmDialog, showToast} from 'vant';
import MyAxios from "../plugins/myAxios.ts";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";


// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')

const titleHtml = ref('')

// 模拟 ajax 异步获取内容

//图片上传

const toolbarConfig = {}



const editorConfig = { placeholder: '请输入内容...' }
// const editorConfig = { MENU_CONF:{} }



// type InsertFnType = (url: string, alt: string, href: string) => void




// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: typeof Editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// function handleSave() {
//   console.log('handleSave', valueHtml.value)
// }
const offset = ref({ x: 300, y: 500 });

onMounted(() => {
  showToast("上传的时候标题和内容不能为空哦")
})


const onClick = () => {
  showConfirmDialog({
    title: '确定上传您的心得吗？',
  })
      .then(() => {
        MyAxios.post("/post/create",{
          title: titleHtml.value,
          content: valueHtml.value,
        })
             .then(res => {
               if(res.data.code === 40000){
                  showToast("标题和内容不能为空！")
               }else{
                 titleHtml.value = ''
                 valueHtml.value = ''
               }
               console.log(res)
             })
             .catch(() => {
               showToast("上传错误")
             });


        if(valueHtml.value.length > 1000){
          myAxios.get('/user/gain/exp', {
            params: {
              count: 300
            }
          }).then(() => {
            showToast("恭喜您获得1500经验值,感谢您的上传,可以在个人主页查看")
          })
          //获取1500经验值
        }else if(valueHtml.value.length > 500){
          myAxios.get('/user/gain/exp', {
            params: {
              count:140,
            }
          }).then(() => {
            showToast("恭喜您获得700经验值,感谢您的上传,可以在个人主页查看")
          })
          //获取700经验值
        }else if(valueHtml.value.length > 100){
          //获取100经验值
          myAxios.get('/user/gain/exp', {
            params: {
              count:20,
            }
          }).then(() => {
            showToast("恭喜您获得100经验值,感谢您的上传,可以在个人主页查看")
          })
        }
      })
      .catch(() => {
        showToast("上传错误")
      });
}
const router = useRouter()
const onClickLeft = () => {
  router.push('/select')
}

const mode = 'simple' // 编辑器模式，可选值：default / simple
</script>

<template>
  <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />

  <div id="building">
    <div class="title" style="width: 96%; top:20%; position: absolute;z-index: 9999;text-align: center;">
      <input type="text" placeholder="请输入标题" style="width: 100%;" v-model="titleHtml"/>
    </div>
    <div style="border: 1px solid #ccc ; opacity:0.9;width: 100%;height: 100%;position: absolute;">
      <Toolbar
          style="border-bottom: 1px solid #ccc;"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 100%; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
      />
    </div>
  </div>

  <div class="suspension-location">
    <van-floating-bubble
        axis="xy"
        icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%B7%BB%E5%8A%A0.png"
        v-model:offset="offset"
        @click="onClick"
    />
  </div>

</template>

<style scoped>
#building {
  background: url("../assets/最终笔记展示背景.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  opacity: 1;
}
.back-btn1 {
  position:fixed;
  float: left;
  top: -1px;
  width: 40px;
  height: 55px;
  left: 88%;
  z-index:2;
}




</style>